<template>
  <div id="recommend">
    <div class="recommend">
      <div class="r-box">
        <div class="box" v-for="(item,i) in goodslist" :key="i" @click="$router.push('/cateGroy/detail/'+item.id)" >
          <img v-bind:src="item.pic" alt />
          <ul>
            <li v-html="item.name"></li>
            <li v-html="item.characteristic"></li>
            <li>￥{{item.originalPrice}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props:["goodslist"],
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
//人气推荐
.recommend {
  background: white;
  
  .r-box {
    display: flex;
    flex-wrap: wrap;
    .box {
      width: 50%;
      box-sizing: border-box;
      padding: 0.2rem;
      ul {
        li:nth-of-type(1) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          height: 0.4rem;
          line-height: 0.4rem;
        }
        li:nth-of-type(2) {
          height: 0.3rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        li:nth-of-type(3) {
          color: red;
        }
      }
      img {
        width: 100%;
      }
    }
  }
}
</style>